<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <script src="layui/layui.js"></script>
</head>
<body>
<table class="layui-hide" id="test" lay-filter="test"></table>
<script type="text/html" id="barDemo">

    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>

</script>
<form class="layui-form" id="test1" style="display:none" lay-filter="example">
<div class="layui-form-item">
    <label class="layui-form-label">部门名称</label>
    <div class="layui-input-block">
        <input type="text" name="name" placeholder="请输入部门名称" autocomplete="on" class="layui-input" id="name1"
               style="width:100px">
    </div>
</div>
<div class="layui-form-item layui-form-text">
    <label class="layui-form-label">工资</label>
    <div class="layui-input-block">
            <textarea lay-verify="required" name="remark" id="remark1" placeholder="请输入内容"
                      class="layui-textarea"></textarea>
    </div>
</div>
<div class="layui-form-item">
    <div class="layui-input-block">
        <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
    </div>
</div>
</form>
</body>
<script>
    layui.use('table', function(){
        //初始化table组件对象
        var table = layui.table;


        //渲染table
        table.render({
            //z找到table  id叫test的组件
            elem: '#test'
            ,url:'report/salary.do'


            ,totalRow: true
            //这个很关键，就是解析 json数据库中数据的 一定要注意键值
            ,cols: [[
                {type:'checkbox',fixed: 'left'}
                ,{field:'id', title:'ID', width:80,  unresize: true, sort: true, totalRowText: '合计行'}
                ,{field:'name', title:'用户名', width:120, edit: 'text'}

                ,{field:'salary', title:'工资', width:80, edit: 'text', sort: true}
                ,{fixed: 'right', width:178, align:'center', toolbar: '#barDemo'}
            ]]
            ,page: true


        });
        //监听工具条
        table.on('tool(test)', function(obj){
            var data = obj.data;
            if(obj.event === 'detail'){
                layer.msg('ID：'+ data.id + ' 的查看操作');
            } else if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    obj.del();
                    layer.close(index);
                });
            } else if(obj.event === 'edit'){
                layer.alert('编辑行：<br>'+ JSON.stringify(data))
            }
        });
        $.ajax({
            type: 'post',
            url: 'report/update.do',
            data: data.field,
            dataType: 'json',
            success: function (data) {
                alert(data.info);
            }
        });
        return false;

    });
</script>
</html>
